<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <comm-search @search="initList()" v-if="showSearch">
        <template #left>
          <el-form-item>
            <el-input
                v-model="queryParam.blurry"
                clearable
                placeholder="请输入名称"
                @keyup.enter.native="initList()"
            />
          </el-form-item>
          <!--          <date-range-picker v-model="queryParam.createTime" class="date-item"/>-->
        </template>
      </comm-search>
      <comm-tool :selections="selections" v-model:show-search="showSearch"
                 @toAdd="toAdd({pid: 0,type: 0,cache: true,hidden: false,iframe: false})" @edit="toEdit(selections[0])"
                 :del-url="baseUrl" @refresh="initList()" :permission="permission"/>
    </div>
    <comm-edit-dialog ref="edit" v-model:dialog-show="editDialogShow"
                      :url="baseUrl" @save="saveMenu" title="菜单">
      <template #content>
        <el-form ref="form" :rules="rules" :model="formData">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="type">
              <el-radio-group v-model="formData.type">
                <el-radio-button :label="0">目录</el-radio-button>
                <el-radio-button :label="1">菜单</el-radio-button>
                <el-radio-button :label="2">按钮</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.type !== 2">
            <el-form-item  label="菜单图标" prop="icon">
              <el-popover
                  placement="bottom-start"
                  :width="540"
                  trigger="click"
                  v-model:visible="showSelIcon"
              >
                <template #reference>
                  <el-input v-model="formData.icon" placeholder="点击选择图标" readonly class="mr20">
                    <template #prefix>
                      <svg-icon
                          v-if="formData.icon"
                          :icon-class="formData.icon"
                          class="el-input__icon"
                          style="height: 32px;width: 16px;"
                      />
                      <el-icon v-else style="height: 32px;width: 16px;">
                        <search/>
                      </el-icon>
                    </template>
                  </el-input>
                </template>
                <icon-select ref="iconSelectRef" @selected="selected" :active-icon="formData.icon"/>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="formData.type !== 2" label="菜单标题" prop="title">
              <el-input v-model="formData.title" placeholder="菜单标题" class="mr20"/>
            </el-form-item>
            <el-form-item v-if="formData.type === 2" label="按钮名称" prop="title">
              <el-input v-model="formData.title" placeholder="按钮名称" class="mr20"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.type !== 0">
            <el-form-item  label="权限标识" prop="permission">
              <el-input v-model="formData.permission" :disabled="formData.iframe === 'true'" placeholder="权限标识"
                        class="mr20"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.type !== 2">
            <el-form-item  label="菜单可见" prop="hidden">
              <el-radio-group v-model="formData.hidden">
                <el-radio-button :label="false">是</el-radio-button>
                <el-radio-button :label="true">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单排序" prop="menuSort">
              <el-input-number v-model.number="formData.menuSort" :min="0" :max="999" controls-position="right"
                               />
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item v-show="formData.type === 1" label="菜单缓存" prop="cache">
          <el-radio-group v-model="formData.cache">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>



        <el-form-item v-if="formData.type !== 2" label="路由地址" prop="path">
          <el-input v-model="formData.path" placeholder="路由地址" style="width: 178px;"/>
        </el-form-item>

        <el-form-item v-show="formData.iframe !== 'true' && formData.type === 1" label="组件名称"
                      prop="componentName">
          <el-input v-model="formData.componentName" style="width: 178px;" placeholder="匹配组件内Name字段"/>
        </el-form-item>
        <el-form-item v-show="formData.iframe !== 'true' && formData.type === 1" label="组件路径" prop="component">
          <el-input v-model="formData.component" style="width: 178px;" placeholder="组件路径"/>
        </el-form-item>
        <el-form-item label="上级类目" prop="pid">
          <el-tree-select
              v-model="formData.pid"
              :data="menus"
              style="width: 450px;"
              :props="{ value: 'id', label: (item)=>{
              return item.meta.title
            }}"
              placeholder="选择上级类目"
              check-strictly
          >
          </el-tree-select>
        </el-form-item>
        </el-form>
      </template>
    </comm-edit-dialog>

    <el-table
        ref="table"
        v-loading="loading"
        lazy
        :load="getMenus"
        :data="dataList"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        row-key="id"
        @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column :show-overflow-tooltip="true" label="菜单标题" prop="title">
        <template #default="scope">
          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''"/>
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column prop="menuSort" align="center" label="类型" width="60px">
        <template #default="scope">
           <span v-if="scope.row.type===0">目录</span>
          <span v-if="scope.row.type===1">菜单</span>
          <span v-if="scope.row.type===2">按钮</span>
        </template>
      </el-table-column>
      <el-table-column prop="menuSort" align="center" label="排序">
        <template #default="scope">
          {{ scope.row.menuSort }}
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识"/>
      <el-table-column prop="cache" label="缓存" width="75px">
        <template #default="scope">
          <span v-if="scope.row.cache">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="hidden" label="可见" width="75px">
        <template #default="scope">
          <span v-if="scope.row.hidden">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期"/>
      <el-table-column label="操作" width="130px" align="center" fixed="right">
        <template #default="scope">
          <comm-operation :data="scope.row" :url="baseUrl" @edit="toEdit(scope.row)"
                          @refresh="refreshByPid(scope.row.pid)" :permission="permission"/>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {ref, toRefs, reactive, getCurrentInstance} from 'vue'
import Pagination from '@/components/Pagination'
import mixins from "@/mixins/mixins";
import CommSearch from "@/components/Comm/CommSearch.vue";
import CommTool from "@/components/Comm/CommTool.vue";
import CommEditDialog from "@/components/Comm/CommEditDialog.vue";
import CommOperation from "@/components/Comm/CommOperation.vue";
import {get, put} from "@/utils/request";
import  IconSelect from '@/components/IconSelect'

const  permission={edit: ['menu:edit'],del: ['menu:del'],add:['menu:add']}
const showSelIcon = ref(false)

const pageData = reactive({
  rules: {
    type: [
      {required: true, message: '请选择类型', trigger: 'change'}
    ],
    icon: [
      {required: true, message: '请选择菜单图标', trigger: 'change'}
    ],
    title: [
      {required: true, message: '请输入菜单标题或名称', trigger: 'blur'}
    ],
    path: [
      {required: true, message: '请输入地址', trigger: 'blur'}
    ],
    menuSort: [
      {required: true, message: '请输入菜单排序', trigger: 'blur'}
    ],
    permission: [
      {required: true, message: '请输入权限标识', trigger: 'blur'}
    ],
    pid: [
      {required: true, message: '请选择上级类目', trigger: 'change'}
    ]
  }
})

const {initList, total, dataList, data, selectionChange, toAdd, toEdit, toSave} = mixins()
const {queryParam, loading, saveLoading, selections, showSearch, editDialogShow, formData, baseUrl} = toRefs(data)

const {rules} = toRefs(pageData)

const isEdit = ref(false)
const roles = ref([])
const {proxy} = getCurrentInstance();

baseUrl.value = '/menus'


initList()


const lazyMap = ref(new Map())

function getMenus(tree, treeNode, resolve) {
  console.log('-----------',tree.id)
  const params = {pid: tree.id}
  get('/menus',params).then(res => {
    resolve(res.content)
    lazyMap.value.set(tree.id, {tree, treeNode, resolve})
  })
}

function refreshByPid(pid) {
  if (pid) {
    location.reload()
    const {tree, treeNode, resolve} = lazyMap.value.get(pid)
    if (tree) {
      getMenus(tree, treeNode, resolve)
    }
  } else {
    initList()
  }
}

const menus = ref([{id: 0, meta: {title: '顶级类目'}}])

function initMenus() {
  get('/menus/build?hasBtn=true').then(res => {
    menus.value = [{id: 0, meta: {title: '顶级类目'}, children: res}]
  })
}

function selected(name) {
  showSelIcon.value = false
  formData.value.icon = name
  console.log('选中', name, formData)
}

function saveMenu(){
  data.formData.iFrame = data.formData.iframe
   toSave('form',function () {
     if(formData.value.pid){
       refreshByPid(formData.value.pid)
     }else {
       initList()
     }
   })
}

initMenus()
</script>


<!--<script>-->
<!--import crudMenu from '@/api/system/menu'-->
<!--import IconSelect from '@/components/IconSelect/index.vue'-->
<!--import DateRangePicker from '@/components/DateRangePicker'-->
<!--import { get } from '@/utils/request'-->
<!--import CommTool from "@/components/Comm/CommTool.vue";-->
<!--import CommSearch from "@/components/Comm/CommSearch.vue";-->
<!--import commTable from "@/mixins/commTable";-->
<!--import CommEditDialog from "@/components/Comm/CommEditDialog.vue";-->
<!--import CommOperation from "@/components/Comm/CommOperation.vue";-->

<!--// crud交由presenter持有-->
<!--export default {-->
<!--  name: 'Menu',-->
<!--  components: {CommOperation, CommEditDialog, CommSearch, CommTool, IconSelect, DateRangePicker },-->
<!--  mixins: [commTable],-->
<!--  data() {-->
<!--    return {-->
<!--      formData: {pid: 0},-->
<!--      lazyMap: new Map(),-->
<!--      baseUrl: '/api/menus',-->
<!--      dialogTitle: '用户',-->
<!--      menus: [{ id: 0, meta:{title: '顶级类目' }}],-->
<!--      rules: {-->
<!--        title: [-->
<!--          { required: true, message: '请输入标题', trigger: 'blur' }-->
<!--        ],-->
<!--        path: [-->
<!--          { required: true, message: '请输入地址', trigger: 'blur' }-->
<!--        ]-->
<!--      }-->

<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.initList(this.baseUrl)-->
<!--  },-->
<!--  methods: {-->
<!--    toAdds(isEdit,row){-->
<!--      if(!row){-->
<!--        row={ menuSort: 1, pid: 0, cache: false, hidden: false, type: 0 }-->
<!--      }else if (row.pid === null) {-->
<!--        row.pid = 0-->
<!--      }-->
<!--      this.initMenus()-->
<!--      this.toAdd(isEdit,row)-->
<!--    },-->
<!--    initMenus() {-->
<!--      get('/api/menus/build?hasBtn=true').then(res => {-->
<!--        this.menus = [{ id: 0, meta: { title: '顶级类目' }, children: res }]-->
<!--        //console.log('菜单',this.menus)-->
<!--      })-->
<!--    },-->
<!--    getMenus(tree, treeNode, resolve) {-->
<!--      const params = { pid: tree.id }-->
<!--      crudMenu.getMenus(params).then(res => {-->
<!--        resolve(res.content)-->
<!--        this.lazyMap.set(tree.id,{tree,treeNode,resolve})-->
<!--      })-->
<!--    },-->
<!--    // 选中图标-->
<!--    selected(name) {-->
<!--      this.formData.icon = name-->
<!--    },-->
<!--    addSuccess(param){-->
<!--       this.refreshByPid(param.pid)-->
<!--    },-->
<!--    refreshByPid(pid){-->
<!--      if(pid){-->
<!--        const { tree, treeNode, resolve } = this.lazyMap.get(pid)-->
<!--        if(tree){-->
<!--          this.getMenus(tree,treeNode,resolve)-->
<!--        }-->
<!--      }else {-->
<!--        this.initList()-->
<!--      }-->

<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

